<template>
    <div class="giftPack">
        <svg t="1718966067700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9755" width="40" height="40">
            <path
                d="M918 465.428c0-20.656-16.772-37.428-37.428-37.428H143.428c-20.656 0-37.428 16.772-37.428 37.428v421.144c0 20.656 16.772 37.428 37.428 37.428h737.144c20.656 0 37.428-16.772 37.428-37.428V465.428z"
                fill="#FF545C" p-id="9756"></path>
            <path
                d="M918 450.94a22.952 22.952 0 0 0-22.94-22.94h-258.12a22.952 22.952 0 0 0-22.94 22.94V924h281.06a22.952 22.952 0 0 0 22.94-22.94v-450.12z"
                fill="#F2044B" p-id="9757"></path>
            <path
                d="M512 344s28.88-69.792 28-156c-0.88-86.208-16.816-88-48-88H344s-68 8.62-68 92 45.152 120 64 140 172 12 172 12z"
                fill="#FECB31" p-id="9758"></path>
            <path
                d="M484.344 345.036C450.032 318.656 428 277.812 428 232c0-57.524 34.74-107.212 84.904-130.276 17.436 4.692 26.44 22.072 27.096 86.276 0.88 86.208-28 156-28 156s-11.084 0.58-27.656 1.036z"
                fill="#FF9058" p-id="9759"></path>
            <path
                d="M321.968 311.328s-3.164-23.828-17.14-47.436-18.652-21.564-27.244-16.596l-40.772 23.58s-17.356 13.208-4.072 36.176c13.28 22.972 31.556 25.864 39.932 28.372 8.38 2.508 49.296-24.096 49.296-24.096z"
                fill="#FECE27" p-id="9760"></path>
            <path
                d="M314.516 316.02c-13.656-1.804-26.232-9.544-33.532-22.164-9.164-15.848-7.512-35.068 2.636-49.416 5.548-1.484 10.8 1.868 21.208 19.452 13.976 23.608 17.14 47.436 17.14 47.436s-2.96 1.924-7.452 4.692z"
                fill="#FF9058" p-id="9761"></path>
            <path d="M548 316s0-168 68-168h140s36 13.664 36 68-84 116-84 116l-160-16z" fill="#FECA34" p-id="9762">
            </path>
            <path
                d="M596.116 320.812L548 316s0-156.916 61.38-167.444c23.128 7.94 35.776 25.676 38.62 51.444 2.604 23.592-29.504 83.476-51.884 120.812z"
                fill="#FF9058" p-id="9763"></path>
            <path
                d="M702.748 295.644s38.988-60.06 63.296-44.28l50.052 32.492s9.7 13.24-2.912 32.664c-12.608 19.428-56.948 21.976-56.948 21.976l-53.488-42.852z"
                fill="#FECE27" p-id="9764"></path>
            <path
                d="M718.832 308.532l-16.084-12.888s36.416-56.1 60.804-45.616c6.424 8.204 6.828 17.48 1.864 27.352-4.544 9.04-29.92 22.996-46.584 31.152z"
                fill="#FF9058" p-id="9765"></path>
            <path
                d="M964 336.564A32.58 32.58 0 0 0 931.436 304H92.564A32.58 32.58 0 0 0 60 336.564v118.872A32.58 32.58 0 0 0 92.564 488h838.872a32.58 32.58 0 0 0 32.564-32.564V336.564z"
                fill="#FF4C77" p-id="9766"></path>
            <path d="M300 304h120v620H300z" fill="#FFC735" p-id="9767"></path>
            <path
                d="M964 336.564A32.58 32.58 0 0 0 931.436 304h-316.684v184h316.684a32.58 32.58 0 0 0 32.564-32.564V336.564z"
                fill="#F00048" p-id="9768"></path>
            <path d="M704 304h120v620h-120z" fill="#FFC735" p-id="9769"></path>
            <path d="M106 488h812v64h-812z" fill="#E30000" fill-opacity=".4" p-id="9770"></path>
        </svg>
        <div class="userCenter_title">{{ $t('my_gift') }}</div>
        <div class="recharge_content">
            <div class="title">
                <span class="flex-list" style="min-width: 130px;flex: none;">{{ $t('Game_Name') }}</span>
                <span class="flex-list" style="width: 130px;flex: none;">{{ $t('gift_name') }}</span>
                <span class="flex-list" style="width: 150px;flex: none;">{{ $t('gift_code') }}</span>
                <span class="flex-list" style="width: 170px;flex: none;">{{ $t('data') }}</span>
                <span class="flex-list" style="width: 70px;flex: none;">{{ $t('gift_type') }}</span>
                <span class="flex-list" style="width: 60px;flex: none;">{{ $t('operate') }}</span>
            </div>
            <div class="main">
                <div class="main_line" v-for="item in userGiftList" :key="item.id">
                    <span class="flex-list" style="min-width: 130px;flex: none;">{{ item.title }}</span>
                    <span class="flex-list" style="width: 130px;flex: none;">{{ item.gift_name }}</span>
                    <span :title="item.gift_code" class="flex-list" style="width: 150px;flex: none;overflow: auto;">{{ item.gift_code }}</span>
                    <span class="flex-list" style="width: 170px;flex: none;">{{item.start_at}}~{{item.end_at}}</span>
                    <span v-if="!item.status" class="flex-list" style="width: 70px;flex: none;">
                        <el-tag type="success">{{ $t('not_used') }}</el-tag>
                    </span>
                    <span v-if="item.status" class="flex-list" style="width: 70px;flex: none;">
                        <el-tag type="info">{{ $t('Used_already') }}</el-tag>
                    </span>
                    <span class="flex-list btn" @click="copy_code(item.gift_code)" style="width: 60px;flex: none;">
                        <el-button size="small" type="primary">{{ $t('copy') }}</el-button>
                    </span>
                </div>
                <p class="isNull" v-if="userGiftList.length == 0" @click="$router.push('/giftPack/0')">{{ $t('no_gift') }}</p>
                <el-pagination 
                    v-if="userGiftList.length > 0"
                    class="pagination"
                    background 
                    layout="prev, pager, next" 
                    :total="totalRecords" 
                    :page-size="currentPage.limit" 
                    :current-page="currentPage.page" 
                    @current-change="handlePageChange" 
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive,ref } from "vue";
import { useUserInfoStore } from '@/store/modules/user_info/index';
const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo)

const userGiftList = ref([])
const currentPage = reactive({ page: 1, limit: 11 });
const totalRecords = ref(0);
const getUserGiftList = async () =>{
    const { page, limit } = currentPage;
    const list = await axios.get('/getUserGiftList?user_id='+user_info.id+`&limit=${limit}&page=${page}`)
    userGiftList.value = list.data.data
    totalRecords.value = list.data.total; 
    console.log(userGiftList,'123');
}
getUserGiftList()

const handlePageChange = (newPage) => {
    currentPage.page = newPage;
    getUserGiftList();
};

const copy_code = (code) =>{
    if (navigator.clipboard && navigator.clipboard.writeText) {
            // 当前环境支持 clipboard API
            navigator.clipboard.writeText(code).then(() => {
            console.log('复制成功');
            // 使用你的消息提示
            
            if(lang.value == 'en'){
                ElMessage.success('Copy successful');
            }else{
                ElMessage.success('複製成功');
            }
        }).catch(err => {
            console.error('复制失败', err);
            ElMessage.error('复制失败');
        });
    } else {
        console.warn('当前环境不支持 clipboard API');
        ElMessage.warning('当前环境不支持复制功能，请手动复制');
    }
}

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}
</script>

<style lang="less" scoped>
.pagination{
    display: flex;
    justify-content: end;
    width: 100%;
    margin-top: 20px;
}
.giftPack {
    .userCenter_title{
        margin-top: 4px;
    }
    .title{
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        span{
            flex: 1;
            text-align: center;
        }
    }
    .main_line{
        span{
            flex: 1;
            text-align: center;
            font-size: 14px;
        }
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        .btn{
            cursor: pointer;
            width: 100px;
            flex: none;
            color: #006dcf;
        }
    }
}

</style>